<template>
    <div class="box">
        <div class="left">
            <div class="list">
                <div style="padding-top: 0px;">排名</div>
                <div>{{ types == '开发商'?'开发商':'项目名称' }} </div>
                <div>应交付/已交付</div>
                <div class=" flex jcc" > 
                    <div>
                        剩余交付
                    </div>
                    <div class="triangle ">
                    <img src="@/assets/img/bjBuilding/up.png" alt="" srcset="" @click="dateSortStr(1,1)" >
                    <img src="@/assets/img/bjBuilding/down.png" alt="" srcset="" @click="dateSortStr(1,2)">
                    </div>
                </div>
                <div class=" flex jcc" > 
                    <div>
                        交付率
                    </div>
                    <div class="triangle ">
                    <img src="@/assets/img/bjBuilding/up.png" alt="" srcset="" @click="dateSortStr(2,1)" >
                    <img src="@/assets/img/bjBuilding/down.png" alt="" srcset="" @click="dateSortStr(2,2)">
                    </div>
                </div>
            </div>
            <div class="list" v-for="(item,index) in selectDeliverRankingData" :key="index">
                <div style="padding-top: 0px;">{{ ++index }}</div>
                <div @click="go(index-1)">
                    <el-tooltip
                    class="box-item"
                    effect="dark"
                    :content="types == '开发商' ? item.groupName : item.projectName"
                    placement="top"
                    >
                         {{types == '开发商' ? item.groupName : item.projectName}}
                    </el-tooltip>
                </div>
                <div class="propressWidth">
                    <el-tooltip
                            class="item"
                            effect="dark"
                            :content="'应交付'+item.shallDeliver+'套'"
                            placement="top"
                            >
                            <div class="m-list" :style="{width:item.yjfjd+'%'}"></div>
                    </el-tooltip>
                    <el-tooltip
                            class="item"
                            effect="dark"
                            :content="'已交付'+item.alreadyDeliver+'套'"
                            placement="top"
                            >
                            <div class="m-list" :style="{width:item.yjjfjd+'%'}"></div>
                    </el-tooltip>
                </div>
                <div>{{item.residueDeliver}}</div>
                <div>{{item.deliverRatio}}%</div>
            </div>
            
           
        </div>

   </div>
    
</template>
   
<script setup>
import { ref,defineProps,onMounted,getCurrentInstance } from 'vue';
import { selectDeliverRanking } from '@/api/bjBuilding'

const props = defineProps({
    parms:Object,
    pageSize:Number,
    pageNumber:Number,
    types:{
        type:String,
        default:'开发商'
    },
    goType:{
        type:Number,
    }
})

const selectDeliverRankingData = ref(null)

let { proxy } = getCurrentInstance();
// 获取开发商交付排名
const useSelectDeliverRanking = async () => {
    props.parms.pageSize = props.pageSize
    props.parms.pageNumber = props.pageNumber
    await selectDeliverRanking(props.parms).then(res => {
            if(res.code == 0){
                res.data.records.forEach(item => {
                    item.yjfjd = (100 - parseInt(item.deliverRatio))          
                    item.yjjfjd = parseInt(item.deliverRatio)
                })
                selectDeliverRankingData.value = res.data.records
            }

    })
}
// 选择剩余交付/交付率的升序降序
const dateSortStr = (a,b) => {
    if(props.parms.sortField == a && props.parms.sortWay  == b) return
    props.parms.sortField = a
    props.parms.sortWay = b
    
    useSelectDeliverRanking()
}

// 调整详情
const go = (index) => {
    if(props.types == '开发商'){
        proxy.$goDetail(selectDeliverRankingData.value[index].groupName);
    }else{
        proxy.$goProDetail(selectDeliverRankingData.value[index].borrowXmId,selectDeliverRankingData.value[index].projectName);
    }
}
onMounted (() => {
    useSelectDeliverRanking()
})

const someMethod = () => {
    return {
        selectDeliverRankingData
    }
}
</script>
<style scoped lang="less">
.box{
    padding: 25px 15px;
    box-sizing: border-box;
    display: flex;
    height: 100%;
    .left{
        font-size: 14px;
        color: rgba(151, 171, 234, 1);
    }
}
.list{
    display: flex;

}


.list:not(:first-child) {
  padding: 20px 0px;
}
.list:not(:first-child) > div:first-child{
    text-align: center;
}
.list:not(:first-child) > div:last-child{
    text-align: center;
}
.list>div:first-child{
    width: 30px;
}
.list>div:nth-child(2){
    width: 60px;
    white-space: nowrap; /* 防止文本换行 */
    overflow: hidden; /* 隐藏超出容器的内容 */
    text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
    cursor:pointer;
}
.list>div:nth-child(3){
    width: 160px;
}
.list>div:nth-child(4){
    width: 70px;
    text-align:center;
    
}
.list>div:nth-child(5){
    width:70px;
    text-align:center;

}
.m-list{
    font-size: 12px;
    color: #E9E9E9;
    height:20px;
}

.m-list:first-child{
    background-image: linear-gradient(to right,rgba(139, 88, 229, 1),rgba(181, 146, 243, 1) );
    display: inline-block;
 
}
.m-list:last-child{
    background-image: linear-gradient(to right,rgba(255, 113, 57, 1),rgba(255, 153, 79, 1) );
    display: inline-block;
}
.m-list:hover{
    cursor: pointer;
}
.zx{
    width: 8px;
    height: 15px;  
    position: relative;
    top: 3px;
    left: 3px;
    img{
      width: 100%;
      height: 100%
    }
  }
  
  .finger{
    cursor:pointer;
  }
  .triangle{
    position: relative;
    left: 2px;
   
  }
  
</style>
   